<template>
  <div class="container">
    <!-- 顶部 -->
    <el-card>
      <div class="header">
        <div>本月: 入职 0 离职 0 调薪 0 未定薪 0</div>
        <div>
            <el-button size='mini'>设置</el-button>
            <el-button size='mini'>202003报表</el-button>
        </div>
      </div>
    </el-card>
    <!-- 筛选器 -->
    <el-card>
      <el-form :model="params" label-width="80px">
        <el-form-item label="聘用形式: ">
          <el-checkbox-group v-model="params.approvalsTypeChecks">
            <el-checkbox label="1">正式</el-checkbox>
            <el-checkbox label="2">非正式</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
          <el-form-item label="员工状态: ">
          <el-checkbox-group v-model="params.approvalsStateChecks">
            <el-checkbox label="1" >在职</el-checkbox>
            <el-checkbox label="2" >离职</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
          <el-form-item label="部门: ">
          <el-checkbox-group v-model="params.departmentChecks">
            <el-checkbox
              v-for="item in departmentList"
              :key="item.id"
              :label="item.id"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card>
      <el-table
      :data="salaryList.rows"
      style="width: 100%">
        <el-table-column
        prop="index"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机"
        width="180">
      </el-table-column>
      <el-table-column
        prop="workNumber"
        label="工号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="formOfEmployment"
        label="聘用形式"
        width="180">
      </el-table-column>
      <el-table-column
        prop="departmentName"
        label="部门"
        width="180">
      </el-table-column>
      <el-table-column
        prop="timeOfEntry"
        label="入职时间"
        width="180">
      </el-table-column>
       <el-table-column
        prop="currentBasicSalary"
        label="工资基数"
        width="180">
      </el-table-column>
      <el-table-column
        prop="inServiceStatus"
        label="津贴方案"
        width="180">
      </el-table-column>
      <el-table-column
        prop=""
        label="操作"
        width="180">
        <template slot-scope="scope">
        <el-button
          size="small"
          @click="dialogVisible = true"
        >
          {{ scope.currentBasicSalary > 0 ? '调薪' : '定薪' }}
        </el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
      </el-table-column>
    </el-table>
    </el-card>

    <!-- 调薪 -->
    <el-dialog
      title="调薪"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      class="title"
    >
      <div class="info">
        <div class="el-icon-video-camera-solid"></div>
        <div>
          <div class="department">部门： </div>
          <div class="hiredate">入职时间： </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <span>{{count}}</span>
  </div>
</template>

<script>
import departmentMixins from '../../mixins/department'
// import { mapActions, mapState }  from 'vuex';
// export default {
//   name: 'salary',
//   data() {
//     return {
//         params: {
//           // 选中的聘用形式
//           approvalsTypeChecks: [],
//           // 选中的员工状态
//           approvalsStateChecks: [],
//           // 选中的部门
//           departmentChecks: []
//         },
//         page: 1,
//         dialogVisible: false,
//         form: {
//           name: '',
//           region: '',
//           date1: '',
//           date2: '',
//           delivery: false,
//           type: [],
//           resource: '',
//           desc: ''
//         }
//       }
//     },
//   watch: {
//     params: {
//       deep: true,
//       handler(newValue) {
//         console.log(newValue)
//       }
//     }
//   },
//   methods: {
//     ...mapActions('department', ['updateDepartmentList']),
//     ...mapActions('salary', ['updateSalaryList']),
//     handleClose(done) {
//         this.$confirm('确认关闭？')
//           .then(_ => {
//             done();
//           })
//           .catch(_ => {});
//       }
//   },
//   computed: {
//     ...mapState('department', ['departmentList']),
//     ...mapState('salary', ['salaryList'])
//   },
//   created() {
//     this.updateDepartmentList();
//     this.updateSalaryList({
//       ...this.params,
//       page: this.page
//     })
//   }
// }
export default {
  mixins: [
    departmentMixins
  ],
  data() {
    return {
      count: ''
    }
  },
  created() {
    setInterval(() => {
      this.count++
    }, 1000)
  }
}
</script>

<style lang='scss' scoped>
.container {
  padding: 16px;

  .header {
    font-size: 12px;
    display: flex;
    width: 100%;
    height: 30px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
  }


  .info {
    display: flex;
    border-bottom: 1px solid #ccc;

    .el-icon-video-camera-solid {
      margin: 0 20px;
    }

    .hiredate {
      margin: 20px 0;
    }
  }
}

</style>
